<template>
<div>
  <van-field v-model="currentValue.name" :label="title" input-align="right" placeholder="请选择" readonly clickable is-link @click="showPicker" />
  <van-popup v-model="show" position="bottom" :style="{ maxHeight: '90%' }">
    <van-picker show-toolbar value-key="name" title="请选择" :columns="list"  @cancel="show = false" @confirm="getPicker"/>
  </van-popup>
</div>
</template>

<script>
export default {
  props:{
    title: {
      type: String
    },
    list: {
      type: Array,
    },
    value:{
      type: String | Number,
      default: null,
    },
    isShow: {
      type: Boolean,
      default: () => true,
    },
    tips: {
      type: String,
    }
  },
  data(){
    return{
      show: false,
    }
  },
  computed:{
    currentValue(){
      let obj = {};
      if(this.value && this.list.length > 0){
        let arr = this.list.filter(item => item.id == this.value);
        obj = arr[0];
      }
      return obj;
    },
  },

  methods:{
    showPicker(){
      if(!this.isShow){
        this.$toast(this.tips);
      }
      this.show = this.isShow;
    },
    getPicker(val){
      if(val){
        this.show = false;
        this.$emit('update:value', val.id);
        this.$emit('confirm', val);
      }else{
        this.show = false;
      }
    },
  }
}
</script>

<style>

</style>